<script setup>
import * as api from "@/api/v-wkf-service"
import router from "@/router/index.js";

const formGroups = ref([])
const getFormGroups = async () => {
  const { data, code } = await api.getFormGroups()
  if (code === 200){
    formGroups.value = data
  }
}

const active = ref([])
const collapseChange = (val) => {

}

const addForm = (group) => {
  const query = {
    groupId: group.id,
    name: group.name
  }
  router.push({path: '/admin/design', query})
}

const editForm = (item, group) => {
  const query = {
    code: item.formId
  }
  router.push({path: '/admin/design', query})
}

const updateForm = (item, type, groupId) => {
  api.updateForm({templateId: item.templateId, type, groupId}).then(rsp => {
    ElMessage({message: '成功', type: 'success',})
    getFormGroups()
  }).catch(err => ElMessage({message: err, type: 'error',}))
}

const moveForm = (item,group,type) => {
  if (type === 'move'){
    const selected = ref('')
    ElMessageBox({
      title: '请选择移动到的分组',
      message: () =>
          h(
              ElSelect,
              {
                modelValue: selected.value,
                'onUpdate:modelValue': (val) => {
                  selected.value = val
                },
                style: { width: '100%'}
              },
              () => {
                return formGroups.value?.map(item => {
                  return h(ElOption, { label: item.name, value: item.id });
                })
              }
          ),
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '拼命加载中...'
          updateForm(item, type, selected.value)
          done()
        } else {
          item.isStop = false
          done()
        }
      }
    })
  }else if (type === 'delete'){
    ElMessageBox.confirm('您确定要删除流程 ' + item.formName + ' 吗，删除后无法恢复，是否继续？', '提示',
        {
          closeOnClickModal: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              instance.confirmButtonText = '拼命加载中...'
              updateForm(item, 'delete')
              done()
            } else {
              item.isStop = false
              done()
            }
          }
        }
    )
  }
}

const switchClick = (item, group) => {
  // const tip = item.isStop ? ' 停用后将会被转移到 “已停用” 分组，您可以再次启用或者删除它，是否继续? ' : '启用后将会进入 “其他” 分组，是否继续？';
  const tip = item.isStop ? `确定停用${item.formName} 流程吗？` : `确定启用${item.formName} 流程吗？`
  ElMessageBox.confirm(tip, '提示',
      {
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '拼命加载中...'
            updateForm(item, (item.isStop ? 'stop' : 'using'))
            done()
          } else {
            item.isStop = false
            done()
          }
        }
      }
  )
}

const switchChange = (val, item, group) => {
  console.log(val,item,group)
}

onMounted(()=>{
  getFormGroups()
})
</script>

<template>
  <div class="container">
    <div class="top">
      <div class="search-box">111</div>
    </div>
    <el-collapse v-model="active" @change="collapseChange">
      <el-collapse-item :name="index" v-for="(group, index) in formGroups" :key="index">
        <template #title>
          <div class="flow-group-header">
            <div class="title">{{ group.name }}{{'&emsp;'}}</div>
            <div><el-button type="primary" text @click.stop.prevent="addForm(group)"><template #icon><i-ep-plus /></template>新建表单</el-button></div>
          </div>
        </template>
        <div class="bottom">
          <div class="flow-group-body">
            <div class="flow-box" v-for="item in group.items">
              <div class="card">
                <div class="flow-icon">
                  <img src="@/assets/flow.png" />
                </div>
                <div class="flow-info">
                  <div class="config">
                    <el-switch
                        v-model="item.isStop"
                        inline-prompt
                        active-text="停用"
                        inactive-text="启用"
                        @click="switchClick(item,group)"
                        @change="(val)=>switchChange(val,item,group)"
                        style="--el-switch-off-color: #409EFF; --el-switch-on-color: #b1b3b8"
                    />
                    <el-dropdown>
                          <span class="el-dropdown-link">
                            配置
                          </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click="editForm(item,group)">编辑</el-dropdown-item>
                          <el-dropdown-item @click="moveForm(item,group,'move')">移动</el-dropdown-item>
                          <el-dropdown-item @click="moveForm(item,group,'delete')" v-if="item.isStop">删除</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                  <div class="item-box">
                    <div class="item">
                      <div style="width: 100%">
                        <strong>{{ item.formName }}</strong>
                      </div>
                    </div>
                  </div>
                  <div class="description">最后更新时间：{{ item.updateTime }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style scoped lang="scss">
.container {
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  .top {
    display: flex;
    padding: 10px;
    .search-box {
      padding: 5px 10px;
      height: 50px;
      width: 100%;
      background-color: white;
    }
  }
  .el-collapse {
    margin: 0 10px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    background-color: white;
    flex: 1;
    .el-collapse-item {
      .flow-group-header {
        display: flex;
        text-align: left;
        align-items: center;
        .title {
          overflow: hidden;
          width: 8em;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      :deep(.el-collapse-item__header) {
        padding: 5px 10px;
      }
    }
  }
  .bottom {
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin: 0 10px;
    .flow-group-body {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      background-color: white;
      .flow-box {
        display: block;
        flex: 0 0 25%;
        max-width: 25%;
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 12px;
        .card {
          height: 100px;
          border-radius: 8px;
          padding: 16px;
          display: flex;
          flex-direction: row;
          width: 100%;
          border: 1px solid #d9d9d9;
          background-color: white;
          .flow-icon {
            img {
              height: 100%;
              border-radius: 8px;
            }
          }
          .flow-info {
            display: flex;
            width: 100%;
            flex-direction: column;
            margin-left: 12px;
            text-overflow: ellipsis;
            justify-content: center;
            overflow: hidden;
            .config {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .el-dropdown-link {
                white-space: nowrap;
                min-width: 2em;
                cursor: pointer;
                color: var(--el-color-primary);
                display: flex;
                align-items: center;
              }
            }
            .item-box {
              display: flex;
              flex-direction: column;
              width: 100%;
              .item {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                strong {
                  display: block;
                  min-width: 150px;
                  max-width: 150px;
                  white-space: nowrap;
                  //text-overflow: ellipsis;
                  //overflow: hidden;
                }
              }
            }
            .description {
              min-width: 250px;
              max-width: 250px;
              white-space: nowrap;
              //text-overflow: ellipsis;
              //overflow: hidden;
              font-size: 12px;
              line-height: 12px;
            }
          }
        }
      }
    }
  }
}
</style>